<template>
  <!-- 模型管理 -->
  <div class="modelManage">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true"
                 :model="form"
                 style="float: right">
          <el-form-item>
            <LocationSelect :locaData.sync="form"></LocationSelect>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.project_name"
                      placeholder="项目名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="onSearch"
                       type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"
              v-for="(item, index) in proData"
              :key="index">
        <div class="box"
             @click="jumpPage(item)">
          <div class="img">
            <img :src="item.img.length>60?item.img:'/static/img/defaultImg.png'"
                 style="width:100%;height:100%" />
          </div>
          <div class="info">{{item.project_name}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24"
              style="padding-top:40px ;text-align: center">
        <el-pagination @current-change="handleCurrentChange"
                       :current-page="form.page"
                       layout="total, prev, pager, next, jumper"
                       :total="pageTotal"
                       :page-sizes="[8]">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { monitorPublicApi } from '@/services/ProjectCenter'
import { standardCodeApi } from '@/services/StandardCode'
import LocationSelect from '@/components/LocationSelect/LocationSelect'
export default {
  components: {
    LocationSelect
  },
  data () {
    return {
      form: {
        province: '',
        province_no: '',
        city_no: '',
        city: '',
        area: '',
        area_no: '',
        project_name: '',
        page: 1,
        per_page: 8
      },
      proData: [],
      pageTotal: 0

    }
  },
  methods: {
    //查询
    onSearch () {
      this.form.page = 1;
      // 获取数据
      this.getData();
    },
    // 获取数据
    getData () {
      monitorPublicApi.getProjectList({
        params: this.form
      }).then(res => {
        this.proData = res.data.data;
        this.pageTotal = res.data.total;
      })
    },
    handleCurrentChange (val) {
      this.form.page = val
      this.getData()
    },
    // 跳转第三方页面
    jumpPage (data) {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: this.$route.query.params
        }
      }).then((res) => {
        // var pageUrl = res.data.list[0].content1 + res.data.list[1].content1 + '&projectId=' + data.project_id + '&pro_number=' + data.project_no + '&token=' + sessionStorage.getItem('access_token')
        var pageUrl = res.data.list[0].content1 + res.data.list[1].content1 + '&projectId=' + data.project_id + '&pro_number=' + data.project_no + '&token=' + localStorage.getItem('access_token')
        window.open(pageUrl)
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  created () {
    this.getData()
  }
}
</script>
<style lang="scss" scoped>
.modelManage {
  padding: 10px;

  .box {
    width: 100%;
    height: 240px;
    cursor: pointer;

    .img {
      width: 100%;
      height: 175px;
      /* background: url('http://hibuilding-new.oss-cn-hangzhou.aliyuncs.com/upload/images/project/20190628/156170555573018.jpeg') no-repeat center center;
        background-size:contain; */
    }

    .info {
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 14px 5px;
    }
  }
}
</style>
